<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>
	        <ui:insert name="title">ACUMAAF - SIAF 2.0</ui:insert>
        </title>
    </h:head>
	<h:body>
    	<p:layout fullPage="true" onResizeComplete="true">
		    <!-- LAYOUT DO TOPO DA PÁGINA -->
			<p:layoutUnit position="top" resizable="false" height="150" style=" background-image: url('../images/bg.png')">
				<ui:include src="/componentes/layout_menu_doc_top.xhtml"/>
				<p:graphicImage url="/images/layout-top-atividade-fisica2.png" style="height:90px;"/>
			</p:layoutUnit>
       		<!-- LAYOUT DO LADO ESQUERDO DA PÁGINA -->
       		<p:layoutUnit position="left" header="Calendário" resizable="false" width="250">
        		<ui:include src="/componentes/layout_esquerdo.xhtml" />
       		</p:layoutUnit>
       		<!-- LAYOUT DO LADO ESQUERDO DA PÁGINA -->
       		<p:layoutUnit position="right" header="Imagem" resizable="false" width="250">
       			<ui:include src="/componentes/layout_direito.xhtml" />
        	</p:layoutUnit>
        	<!-- LAYOUT DO CENTRO DA PÁGINA -->
       		<p:layoutUnit position="center" id="centro" resizable="true"  scrollable="true" width="250">
       			<h:form id="formPresenca">
       				<p:growl autoUpdate="true" id="growl" sticky="true"/>
 					<p:messages id="msgPresenca" autoUpdate="true"/>
					<p:panel header="Selecione uma Sessão de Atividade Física">
						<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
							<h:panelGrid columns="3" columnClasses="label, value" styleClass="grid">
								<h:outputText value="Sessão de Atividade Física: *" />
								<p:inputText id="sessaoAtividadeFisica" name="sessaoAtividadeFisica" value="#{presencaMB.sessao.data}" 
								             required="true" requiredMessage="[Sessão de Atividade Física] É necessário escolher uma Sessão de Atividade Física!" 
								             onkeypress="return false;">
									<f:convertDateTime pattern="dd/MM/yyyy"/>	             
								</p:inputText>
								<h:outputLink value="javascript:void(0)" onclick="dialogSessaoAtividadeFisica.show()" title="Seleção de Sessão de Atividade Física">     
								    <p:graphicImage value="/images/sessao-atividade-fisica-mini-icon.png" />  
								</h:outputLink>
							</h:panelGrid>
						</h:panelGrid>
					</p:panel>
					<p:panel header="Lista de Matriculados">
						<h:panelGrid id="listaUsuarios"  columnClasses="label, value" style="margin-left: auto; margin-right: auto; width:500px;">
							<p:dataTable id="dataTableListaUsuarios" var="usuario" value="#{presencaMB.listaUsuarios}" 
							             selection="#{presencaMB.listaUsuariosSelecionados}"  rendered="#{presencaMB.mostrar}">
						       		<f:facet name="header">
						           		Lista de Presença de Usuários
						       		</f:facet>
						       		<p:column selectionMode="multiple" style="text-align:center;"/> 
									<p:column sortBy="#{usuario.nome}" filterBy="#{usuario.nome}" style="width:300px;">
						       		    <f:facet name="header">
						               		<h:outputText value="Nome" />
						           		</f:facet>
						           		<h:outputText value="#{usuario.nome}" />
						       		</p:column>
						    </p:dataTable>		
						</h:panelGrid>
					</p:panel>
					<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid" style="border:none;">
						<h:outputText value="* Campos Obrigatórios!"/> <br/><br/>
						<p:commandButton action="#{presencaMB.cadastrarPresenca}"  image="ui-icon ui-icon-pencil" 
						                 value="Salvar" update="msgPresenca,growl" ajax="false"/>
					</h:panelGrid>
				</h:form>
 		   	</p:layoutUnit>
 		   	<!-- LAYOUT DO RODAPÉ DA PÁGINA -->
       		<p:layoutUnit position="bottom" resizable="false" height="60" style="background-image: url('../images/bg.png')">
        		<ui:include src="/componentes/layout_rodape.xhtml" />
       		</p:layoutUnit>
    	</p:layout>
    	<h:form id="formDialogPresenca">
			<!-- DIALOG PARA SELEÇÃO DE SESSÃO DE ATIVIDADE FÍSICA -->
    		<p:dialog header="Seleção de uma Sessão de Atividade Física" widgetVar="dialogSessaoAtividadeFisica" resizable="false" width="500"  
    	          showEffect="explode" hideEffect="explode" id="idDialogSessaoAtividadeFisica" closable="true" modal="true">
				<p:dataTable id="dataTableSessaoAtividadeFisica" var="sessaoAtividadeFisica" 
					             value="#{presencaMB.listaSessoes}" paginator="true" rows="10">
				       		<f:facet name="header">
				           		Lista de Sessões de Atividade Física
				       		</f:facet>
							<p:column style="width:10px; text-align:center;">
				       		    <f:facet name="header">
				               	<h:outputText value="Código" />
				           		</f:facet>
				           		<h:outputText value="#{sessaoAtividadeFisica.codigosessao}" />
				       		</p:column>
				               <p:column style="text-align:center;">
				       		    <f:facet name="header">
				               		<h:outputText value="Data" />
				           		</f:facet>
				           		<h:outputText value="#{sessaoAtividadeFisica.data}">
				           			<f:convertDateTime pattern="dd/MM/yyyy"/>
				           		</h:outputText> 
				       		</p:column>
					        <p:column headerText="Selecionar" style="width:20px; text-align:center;" >
					        	<p:commandButton title="Selecionar" value="Selecionar" update=":formPresenca:sessaoAtividadeFisica,:formPresenca:listaUsuarios" 
					        	                 image="ui-icon ui-icon-search" oncomplete="dialogSessaoAtividadeFisica.hide()">
				       				<f:setPropertyActionListener target="#{presencaMB.sessao}" value="#{sessaoAtividadeFisica}" />
				       				<f:setPropertyActionListener target="#{presencaMB.mostrar}" value="#{true}" />
					       		</p:commandButton>
					        </p:column>	
				    </p:dataTable>
			</p:dialog>
    	</h:form>
	</h:body>
</html>